import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import reportWebVitals from './reportWebVitals';
import { registerMicroApps, start, initGlobalState } from 'qiankun';
import { createStore } from 'redux';
import reducer from './reducers/index';
import { setGlobalState } from './actions';
import App from './App';
import './index.css';
import 'antd/dist/antd.css/';
// import './style/reset.css';
const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);
const state = { isLogin: false, drawReactMain: false, modalReactMicro: false };
// 初始化 state
const actions = initGlobalState(state);

actions.onGlobalStateChange((state, prev) => {
  console.log('🚀 ~ file: index.js ~ line 22 ~ actions.onGlobalStateChange ~ state', state);
  // state: 变更后的状态; prev 变更前的状态;console.log(state, prev, '??????######$$$$$$');
  store.dispatch(setGlobalState(state));
});
actions.setGlobalState(state);

React.$setGlobalState = actions.setGlobalState;

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

registerMicroApps([
  // {
  //   name: 'vue app',
  //   entry: { scripts: ['//localhost:7104/entry.js'] },
  //   container: '#containerB',
  //   activeRule: '/containerB',
  // },
  {
    name: 'purehtml',
    entry: '//localhost:7104',
    container: '#containerB',
    activeRule: '/a/b/purehtml',
  },
  {
    name: 'vuemicro',
    entry: '//localhost:9999',
    container: '#containerC',
    activeRule: '/a/c/vuemicro',
  },
  {
    name: 'reactmicro',
    entry: '//localhost:8888',
    container: '#containerD',
    activeRule: '/a/d/reactmicro',
  },
]);

start();
